{% extends '@Backend/layout.html.twig' %}

{% block web_title %}报名列表{% endblock %}

{% block style %}
    <style>
        .table td{
            vertical-align: middle !important;
            text-align: center;
        }
    </style>
{% endblock %}

{% block body %}
    <!-- Main content -->
    <section class="content">
        <div class="box box-info">
            <div class="box-header">
                <h3 class="box-title">预约报名列表</h3>
                <form action="{{ path('backend_homepage') }}" class="form-group overflow-hide" style="margin-top: 20px;">
                    <span class="pull-left" style="line-height: 34px;">是否联系成功：</span>
                    <select type="text" class="form-control pull-left" name="status" style="width: 150px;margin-right: 20px;">
                        {% set select = app.request.get('status') %}
                        <option value="">全部</option>
                        <option value="0" {% if select == '0' %}selected{% endif %}>否</option>
                        <option value="1" {% if select == 1 %}selected{% endif %}>是</option>
                    </select>

                    <span class="pull-left" style="line-height: 34px;">选择年份：</span>
                    <select type="text" class="form-control pull-left" name="year" style="width: 150px;margin-right: 20px;">
                        {% for item in yearData %}
                        <option value="{{ item }}" {% if item == app.request.get('year') %}selected{% endif %}>{{ item }}</option>
                        {% endfor %}
                    </select>

                    <input type="text" class="form-control pull-left" name="n" value="{{ app.request.get('n') }}" placeholder="请输入关键字" style="width: 150px;margin-right: 20px;">

                    <button class="btn btn-primary pull-left" style="margin-right: 15px;">搜索</button>
                    <a class="btn btn-primary pull-left" href="{{ path('backend_homepage') }}">重置</a>
                </form>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th width="10%">年份</th>
                        <th width="10%">学生姓名</th>
                        <th width="10%">学生年龄</th>
                        <th width="10%">家长手机号</th>
                        <th width="12%">报名时间</th>
                        <th width="10%">是否联系</th>
                        <th width="10%">是否联系成功</th>
                        <th width="18%">备注信息</th>
                        <th width="10%">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% if pagination.getTotalItemCount != 0 %}
                        {% for list in pagination %}
                        <tr>
                            <td>{{ list.year }}</td>
                            <td>{{ list.name }}</td>
                            <td>{{ list.age }}</td>
                            <td>
                                <a>{{ list.mobile }}</a>
                            </td>
                            <td>{{ list.createdAt.date | slice(0,16) }}</td>
                            <td>{% if list.status == 0 %}否{% elseif list.status == 1 %}是（成功）{% else %}是（失败）{% endif %}</td>
                            <td data-id="{{ list.id }}">
                                {% if list.status != 1 %}
                                <a class="apply-status cur" data-s="1">成功</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <a class="apply-status cur" data-s="2">失败</a>
                                {% else %}
                                    <span style="color: green">
                                        <i class="fa fa-check"></i>
                                            联系成功
                                    </span>
                                {% endif %}
                            </td>
                            <td>{{ list.message | default('暂无') }}</td>
                            <td>
                                <a class="apply-remove cur" data-id="{{ list.id }}">删除</a>&nbsp;&nbsp;
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="9">暂无数据</td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>

                <div class="pagination pull-right">
                    {{ knp_pagination_render(pagination) }}
                </div>
            </div>
            <!-- /.box-body -->
        </div>
    </section>

    <div class="layer_textatea" style="display: none;">
        <textarea class="form-control textatea_text" id="" placeholder="最多输入255个字符" rows="6" maxlength="255"></textarea>

        <button class="btn btn-primary msg-submit" style="margin-left: 5%;">提交</button>
    </div>
{% endblock %}

{% block js %}
    <script>
        navHighLight('0');

        $(function () {
            $('.apply-remove').on('click', function() {
                var _this = $(this), del_id = _this.data('id');

                layer.confirm('确定删除吗？', function(index) {
                    layer.close(index);

                    $.post('{{ path('api_apply_del') }}', {id: del_id}, function (res) {
                        layer.msg(res.message);
                        if (res.errorCode == 0) {
                            _this.parents('tr').fadeOut("fast", function (){
                                _this.parents('tr').remove();
                            });
                        }
                    });

                });
            });

            var status = '', id = '';

            // 填写备注
            $('.apply-status').on('click', function() {
                status = $(this).data('s'), id = $(this).parent('td').data('id');
                layer.open({
                    type: 1,
                    shade: 0.5,
                    title: '请填写备注信息', //不显示标题
                    area: ['420px', '270px'], //宽高
                    content: $('.layer_textatea')
                });
            });

            // 点击提交
            $('.msg-submit').on('click', function() {
                var mes = $.trim($('.textatea_text').val());

                if (mes == '') {
                    layer.msg('请输入内容');
                    return
                }

                $.post('{{ path('api_apply_status') }}', {id: id, status: status, mes: mes}, function(res) {
                    layer.msg(res.message);
                    if (res.errorCode == 0) {
                        window.location.reload();
                    }
                })
            })
        });
    </script>
{% endblock %}